<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>@keyframes 中创建动画效果</title>
	<style type="text/css">
        div{
        	width:100px;height:100px;background:red;animation:myfirist 5s linear 2s infinite alternate;-webkit-animation:myfirst 5s linear 2s infinite alternate;position: relative;
        }

       /* @keyframes myfirst{
        	from {background:red;} to {background: yellow;}
        }
        @-webkit-keyframes myfirst{
        	from {background:red;} to {background: yellow;}
        }*/
        @-webkit-keyframes myfirst{
        	0% {background:red;left:0;top:0;}
        	25%{background: yellow;left:200px;top:0;}
        	50%{background: green;left:200px;top:200px;}
        	75%{background: blue;left:0px;top:200px;}
        	100%{background: red;left:0px;top:0;}
        }
	</style>
</head>
<body>
    
    <div>在这里做背景颜色效果渐变的动画</div>
	
</body>
</html>